<template>
  <view class="help-center">
    <!-- 客服联系区域 -->
    <view class="service-header">
      <image
        class="service-avatar"
        src="/static/image/kf.jpeg" 
        mode="aspectFill"
      ></image>
      <view class="service-info">
        <text class="service-time">服务时间：【AM9:00 ~ PM00:00】</text>
        <text class="service-desc">We will spare no effort to provide you with the best service experience possible</text>
      </view>
      <button class="contact-btn" @click="contactCustomerService">联系客服</button>
    </view>

    <!-- 常见问题区域 -->
    <view class="common-questions">
      <view class="section-title">
        <text class="title-tag">|</text>
        <text class="title-text">常见问题</text>
      </view>
      <text class="tips">浏览问题列表快速掌握疑问，我们随时为您服务</text>
      <view class="question-list">
        <view 
          class="question-item" 
          v-for="(item, index) in questionList" 
          :key="index" 
          @click="goToDetail(item)"
        >
          <text class="question-text">{{ item.title }}</text>
          <image 
            class="arrow" 
            src="/static/arrow-right.png" 
            mode="aspectFill"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questionList: [
        {
          title: '港澳台及国际物流的说明',
          path: 'question-detail-1' 
        },
        {
          title: '2025年春节放假通知',
          path: 'question-detail-2' 
        },
        {
          title: '严正声明：抵制虚假宣传，维护“星印周边”品...',
          path: 'question-detail-3' 
        },
        {
          title: '发布传播色情低俗类违法违规内容',
          path: 'question-detail-4' 
        },
        {
          title: '下单出错的解决办法',
          path: 'question-detail-5' 
        },
        {
          title: '关于快递的问题',
          path: 'question-detail-6' 
        },
        {
          title: '关于配送问题',
          path: 'question-detail-7' 
        },
        {
          title: '关于退款处理',
          path: 'question-detail-8' 
        },
        {
          title: '关于横图上传等图片问题',
          path: 'question-detail-9' 
        },
        {
          title: '关于出血尺寸问题',
          path: 'question-detail-10' 
        }
      ]
    };
  },
  methods: {
    contactCustomerService() {
      // 可在此实现联系客服逻辑，比如跳转客服聊天页面、唤起客服电话等
      uni.showToast({
        title: '联系客服功能待实现',
        icon: 'none'
      });
    },
    goToDetail(item) {
      // 跳转问题详情页，实际可根据 item.path 配置对应页面路径
      uni.navigateTo({
        url: `/pages/${item.path}/${item.path}`
      });
    }
  }
};
</script>

<style scoped>
.help-center {
  padding: 15rpx;
  background-color: #fff;
}

/* 客服头部区域 */
.service-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 15rpx;
  background: linear-gradient(to right, #fce4f3, #d9f0fc); 
}
.service-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.service-info {
  flex: 1;
}
.service-time {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.service-desc {
  font-size: 24rpx;
  color: #666;
}
.contact-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  background-color: #4cd964;
  border-radius: 40rpx;
}

/* 常见问题区域 */
.common-questions {
  margin-top: 30rpx;
}
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.title-tag {
  font-size: 32rpx;
  color: #ff5c8d;
  margin-right: 10rpx;
}
.title-text {
  font-size: 32rpx;
  font-weight: bold;
}
.tips {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 20rpx;
}
.question-list {
  border-top: 1px solid #f5f5f5;
}
.question-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.question-text {
  font-size: 28rpx;
  color: #333;
}
.arrow {
  width: 40rpx;
  height: 40rpx;
}
</style>